React experimental_useFormState: põhjalik juhend täiustatud vormihalduseks

Reacti pidevalt arenev ökosüsteem toob pidevalt sisse uuenduslikke tööriistu, et parandada arendajakogemust ja rakenduse jõudlust. Üks selline edasiminek on experimental_useFormState Hook. See hook, mis on praegu eksperimentaalses etapis, pakub võimsa ja sujuva lähenemisviisi vormi oleku haldamiseks ja asünkroonsete toimingute käsitlemiseks, eriti kui seda kombineerida React Server Components ja Actionsiga. See juhend süveneb experimental_useFormState keerukustesse, uurides selle eeliseid, kasutusjuhtumeid ja rakendusstrateegiaid.

Mis on experimental_useFormState?

experimental_useFormState Hook on loodud vormihalduse lihtsustamiseks Reacti rakendustes. See pakub deklaratiivset viisi vormi oleku, vigade ja asünkroonsete esitamiste käsitlemiseks. Erinevalt traditsioonilistest meetoditest, mis sageli hõlmavad käsitsi oleku värskendusi ja keerukat sündmuste käsitlemist, muudab experimental_useFormState selle protsessi sujuvamaks, pakkudes ühe hooki kogu vormi elutsükli haldamiseks.

Põhimõtteliselt võimaldab experimental_useFormState teil siduda oleku väärtuse funktsiooniga, mis teostab vormi esitamise loogika. See funktsioon, mis on tavaliselt serveritoiming React Server Components kontekstis, vastutab andmete valideerimise ja vajalike muudatuste tegemise eest. Seejärel haldab hook selle funktsiooni täitmise olekut, andes kasutajale tagasisidet vormi oleku kohta (nt laadimine, õnnestumine, viga).

experimental_useFormState kasutamise eelised

• Lihtsustatud vormiloogika: vähendab boilerplati koodi, tsentraliseerides vormi oleku halduse ühes hookis.
• Parem jõudlus: optimeerib renderdamist, minimeerides tarbetuid värskendusi ja kasutades ära serveripoolseid andmete muudatusi.
• Deklaratiivne lähenemisviis: soodustab loetavamat ja hooldatavamat koodibaasi deklaratiivse programmeerimisstiili kaudu.
• Sujuv integreerimine serveritoimingutega: loodud töötama sujuvalt React Server Components ja Actionsiga, võimaldades tõhusat andmete hankimist ja muudatusi.
• Täiustatud kasutajakogemus: pakub kasutajale selget ja lühikest tagasisidet vormi oleku kohta, parandades üldist kasutajakogemust.

experimental_useFormState kasutusjuhtumid

experimental_useFormState Hook sobib eriti hästi stsenaariumide jaoks, mis hõlmavad keerulisi vorme, mis nõuavad serveripoolset valideerimist ja andmete muudatusi. Siin on mõned levinud kasutusjuhtumid:

• Autentimisvormid: kasutaja registreerimise, sisselogimise ja parooli lähtestamise vormide käsitlemine.
• E-kaubanduse vormid: kassavormide töötlemine, kasutajaprofiilide värskendamine ja toodete loendite haldamine.
• Sisuhaldussüsteemid (CMS): artiklite loomine ja redigeerimine, kasutajarollide haldamine ja veebisaidi seadete konfigureerimine.
• Sotsiaalmeedia platvormid: värskenduste postitamine, kommentaaride esitamine ja kasutajaprofiilide haldamine.
• Andmesisestusvormid: andmete kogumine ja valideerimine erinevatest allikatest, nagu küsitlused, tagasisidevormid ja kliendiandmed.

Rakenduse näide: lihtne kontaktivorm

Kujutame experimental_useFormState kasutamist praktilise näitega: lihtne kontaktivorm. See vorm kogub kasutaja nime, e-posti aadressi ja sõnumi ning saadab seejärel andmed serveritoimingule töötlemiseks.

1. Määratlege serveritoiming

Esmalt peame määratlema serveritoimingu, mis käsitleb vormi esitamist. See toiming valideerib andmed ja saadab e-kirja teavituse.

```javascript // app/actions.js 'use server'; import { revalidatePath } from 'next/cache'; import { sendEmail } from './utils/email'; // Näide e-kirja saatmise funktsioonist export async function submitContactForm(prevState, formData) { const name = formData.get('name'); const email = formData.get('email'); const message = formData.get('message'); // Põhiline valideerimine if (!name || !email || !message) { return 'Palun täitke kõik väljad.'; } try { await sendEmail({ to: 'admin@example.com', // Asendage oma administraatori e-posti aadressiga subject: 'Uus kontaktivormi esitamine', text: `Nimi: ${name}\nE-post: ${email}\nSõnum: ${message}`, }); revalidatePath('/'); // Kinnitage avaleht või asjakohane tee uuesti return 'Aitäh teie sõnumi eest!'; } catch (error) { console.error('Viga e-kirja saatmisel:', error); return 'Tekkis viga. Palun proovige hiljem uuesti.'; } } ```

Selgitus:

• Direktiiv 'use server' näitab, et seda funktsiooni tuleks käitada serveris.
• Funktsioon saab argumentidena eelmise oleku (prevState) ja vormi andmed (formData).
• See eraldab vormi andmetest nime, e-posti aadressi ja sõnumi.
• See teostab põhivalideerimise, et tagada kõigi nõutud väljade täitmine.
• See kasutab asünkroonset funktsiooni sendEmail (mille peate eraldi rakendama) e-kirja teavituse saatmiseks. See võib kasutada teenust nagu SendGrid, Mailgun või AWS SES.
• revalidatePath('/') sunnib Next.js-i avalehe andmeid uuesti hankima, tagades, et kõik asjakohased muudatused kajastuvad kohe.
• See tagastab vormi oleku värskendamiseks edu- või veateate.

2. Rakendage Reacti komponent

Nüüd loome Reacti komponendi, mis kasutab experimental_useFormState vormi oleku haldamiseks ja esitamise käsitlemiseks.

```javascript 'use client'; import { experimental_useFormState as useFormState } from 'react'; import { submitContactForm } from './actions'; function ContactForm() { const [state, formAction] = useFormState(submitContactForm, null); return (

Nimi:

E-post:

Sõnum: </div> <button type="submit">Saada</button> {state && <p>{state}</p>} </form> ); } export default ContactForm; ``` <p><b>Selgitus:</b></p> <ul> <li>Direktiiv <code>'use client'</code> näitab, et see komponent on kliendikomponent.</li> <li>Impordime <code>experimental_useFormState</code> kui <code>useFormState</code> lühiduse huvides ja <code>submitContactForm</code> toimingu.</li> <li>Kutsume <code>useFormState</code>, edastades <code>submitContactForm</code> toimingu ja oleku algväärtuse <code>null</code>.</li> <li>Hook tagastab praeguse oleku (<code>state</code>) ja funktsiooni (<code>formAction</code>), mis käivitab vormi esitamise.</li> <li>Kinnitame funktsiooni <code>formAction</code> elemendi <code>form</code> atribuudile <code>action</code>. See on oluline, et React saaks vormi esitamist õigesti käsitleda.</li> <li>Vorm sisaldab sisestusvälju nime, e-posti aadressi ja sõnumi jaoks, samuti saatmisnuppu.</li> <li>Rida <code>{state && <p>{state}</p>}</code> kuvab kasutajale praeguse oleku (edu- või veateate).</li> </ul> <h3>3. E-kirja saatmise teenuse seadistamine (sendEmail näide)</h3> <p>Peate rakendama funktsiooni <code>sendEmail</code>. Siin on näide, kasutades Nodemaileri koos Gmaili kontoga (Märkus: Gmaili otse tootmises kasutamine on üldiselt heidutatud. Kasutage tootmiskeskkondade jaoks spetsiaalset e-posti teenust, nagu SendGrid, Mailgun või AWS SES.):</p> ```javascript // app/utils/email.js import nodemailer from 'nodemailer'; export async function sendEmail({ to, subject, text }) { // Looge transpordiobjekt, kasutades Gmail SMTP-d const transporter = nodemailer.createTransport({ service: 'gmail', auth: { user: 'your_gmail_address@gmail.com', // Asendage oma Gmaili aadressiga pass: 'your_gmail_password', // Asendage oma Gmaili parooli või rakenduse parooliga }, }); // Määratlege e-posti valikud const mailOptions = { from: 'your_gmail_address@gmail.com', to: to, subject: subject, text: text, }; // Saada e-kiri try { await transporter.sendMail(mailOptions); console.log('E-kiri saadeti edukalt'); } catch (error) { console.error('Viga e-kirja saatmisel:', error); throw error; // Saada viga uuesti, et see serveritoimingus kinni püüda } } ``` <p><b>Oluline turvamärkus:</b> Ärge kunagi salvestage oma tegelikku Gmaili parooli otse oma koodibaasi! Kasutage tundliku teabe salvestamiseks keskkonnamuutujaid. Tootmises kasutamiseks genereerige Nodemaileri jaoks spetsiaalne rakenduse parool ja vältige oma peamise Gmaili parooli kasutamist. Spetsiaalsed e-kirja saatmise teenused pakuvad paremat kohaletoimetamist ja turvalisust võrreldes Gmaili otse kasutamisega.</p> <h3>4. Näite käivitamine</h3> <p>Veenduge, et teil oleks vajalikud sõltuvused installitud:</p> ```bash npm install nodemailer ``` või</p> ```bash yarn add nodemailer ``` <p>Seejärel käivitage oma Next.js-i arendusserver:</p> ```bash npm run dev ``` või</p> ```bash yarn dev ``` <p>Avage oma brauser ja navigeerige lehele, mis sisaldab komponenti <code>ContactForm</code>. Täitke vorm ja esitage see. Peaksite nägema kas eduteadet või veateadet, mis kuvatakse vormi all. Kontrollige oma e-posti postkasti, et veenduda, kas e-kiri saadeti edukalt.</p> <h2>Täiustatud kasutus ja kaalutlused</h2> <h3>1. Laadimise olekute käsitlemine</h3> <p>Parema kasutajakogemuse pakkumiseks on oluline näidata, millal vorm esitatakse. Kuigi <code>experimental_useFormState</code> ei avalda otseselt laadimise olekut, saate seda käsitsi hallata, kasutades Reacti hooki <code>useTransition</code> koos <code>formAction</code>.</p> ```javascript 'use client'; import { experimental_useFormState as useFormState, useTransition } from 'react'; import { submitContactForm } from './actions'; function ContactForm() { const [state, formAction] = useFormState(submitContactForm, null); const [isPending, startTransition] = useTransition(); const handleSubmit = async (formData) => { startTransition(() => { formAction(formData); }); }; return ( <form action={handleSubmit}> <div> <label htmlFor="name">Nimi:</label> <input type="text" id="name" name="name" required /> </div> <div> <label htmlFor="email">E-post:</label> <input type="email" id="email" name="email" required /> </div> <div> <label htmlFor="message">Sõnum:</label> <textarea id="message" name="message" rows="4" required /> </div> <button type="submit" disabled={isPending}> {isPending ? 'Saadan...' : 'Saada'} </button> {state && <p>{state}</p>} </form> ); } export default ContactForm; ``` <p>Selles näites:</p> <ul> <li>Impordime <code>useTransition</code> reactist.</li> <li>Kutsume <code>useTransition</code>, et saada olek <code>isPending</code> ja funktsioon <code>startTransition</code>.</li> <li>Mähime kutse <code>formAction</code> funktsiooni <code>startTransition</code> sisse. See ütleb Reactile, et vormi esitamist tuleks käsitleda üleminekuna, võimaldades seda vajadusel katkestada.</li> <li>Keelame nupu Saada, kui <code>isPending</code> on tõene, ja muudame nupu teksti väärtuseks Saadan....</li> </ul> <h3>2. Vigade käsitlemine ja valideerimine</h3> <p>Tugev vigade käsitlemine on hea kasutajakogemuse pakkumiseks ülioluline. Serveritoiming peaks teostama põhjaliku valideerimise ja tagastama kliendile informatiivsed veateated. Seejärel saab kliendikomponent neid teateid kasutajale kuvada.</p> <p><b>Serveripoolne valideerimine:</b> Valideerige andmed alati serveris, et vältida pahatahtlikku sisestust ja tagada andmete terviklikkus. Kasutage skeemi valideerimiseks teeke nagu Zod või Yup.</p> <p><b>Kliendipoolne valideerimine (valikuline):</b> Kuigi serveripoolne valideerimine on oluline, võib kliendipoolne valideerimine pakkuda kasutajale kohest tagasisidet ja parandada kasutajakogemust. Kuid kliendipoolsele valideerimisele ei tohiks kunagi tugineda ainsa tõe allikana.</p> <h3>3. Optimistlikud värskendused</h3> <p>Optimistlikud värskendused võivad muuta teie rakenduse tundlikumaks, värskendades kohe kasutajaliidest nii, nagu oleks vormi esitamine edukas, isegi enne, kui server seda kinnitab. Kuid olge valmis käsitlema vigu ja muutma muudatusi, kui esitamine ebaõnnestub.</p> <p>Funktsiooniga <code>experimental_useFormState</code> saate rakendada optimistlikke värskendusi, värskendades kohalikku olekut vormi andmete alusel enne <code>formAction</code> kutsumist. Kui serveritoiming ebaõnnestub, saate muudatused tagasi pöörata vastavalt hooki tagastatud veateatele.</p> <h3>4. Uuesti valideerimine ja vahemällu salvestamine</h3> <p>React Server Components ja Actions kasutavad jõudluse parandamiseks vahemällu salvestamist. Kui vormi esitamine muudab andmeid, on oluline vahemälu uuesti valideerida, et tagada, et kasutajaliides kajastab uusimaid muudatusi.</p> <p>Funktsioone <code>revalidatePath</code> ja <code>revalidateTag</code> from <code>next/cache</code> saab kasutada vahemälu konkreetsete osade tühistamiseks. Näites <code>submitContactForm</code> kasutatakse <code>revalidatePath('/')</code> avalehe uuesti valideerimiseks pärast vormi edukat esitamist.</p> <h3>5. Rahvusvahelistamine (i18n)</h3> <p>Globaalse vaatajaskonna jaoks rakenduste loomisel on rahvusvahelistamine (i18n) ülioluline. See hõlmab teie rakenduse kohandamist erinevate keelte, piirkondade ja kultuuriliste eelistustega.</p> <p>Vormide puhul tähendab see lokaliseeritud siltide, veateadete ja valideerimisreeglite pakkumist. Kasutage i18n teeke, nagu <code>next-intl</code> või <code>react-i18next</code>, et hallata tõlkeid ja vormindada andmeid vastavalt kasutaja lokaadile.</p> <p>Näide, kasutades <code>next-intl</code>:</p> ```javascript // i18n.js (näide) import { createTranslator } from 'next-intl'; const messages = { en: { ContactForm: { NameLabel: 'Name', EmailLabel: 'Email', MessageLabel: 'Message', SubmitButton: 'Submit', SuccessMessage: 'Thank you for your message!', ErrorMessage: 'An error occurred. Please try again later.', NameRequired: 'Name is required', EmailRequired: 'Email is required', MessageRequired: 'Message is required', }, }, es: { ContactForm: { NameLabel: 'Nombre', EmailLabel: 'Correo electrónico', MessageLabel: 'Mensaje', SubmitButton: 'Enviar', SuccessMessage: '¡Gracias por tu mensaje!', ErrorMessage: 'Ocurrió un error. Inténtalo de nuevo más tarde.', NameRequired: 'El nombre es obligatorio', EmailRequired: 'El correo electrónico es obligatorio', MessageRequired: 'El mensaje es obligatorio', }, }, // Lisage vastavalt vajadusele rohkem keeli }; export async function getTranslations(locale) { return createTranslator({ locale, messages }); } ``` ```javascript // ContactForm.js 'use client'; import { experimental_useFormState as useFormState, useTransition } from 'react'; import { submitContactForm } from './actions'; import { useLocale, useTranslations } from 'next-intl'; function ContactForm() { const [state, formAction] = useFormState(submitContactForm, null); const [isPending, startTransition] = useTransition(); const t = useTranslations('ContactForm'); const handleSubmit = async (formData) => { startTransition(() => { formAction(formData); }); }; return ( <form action={handleSubmit}> <div> <label htmlFor="name">{t('NameLabel')}:</label> <input type="text" id="name" name="name" required /> </div> <div> <label htmlFor="email">{t('EmailLabel')}:</label> <input type="email" id="email" name="email" required /> </div> <div> <label htmlFor="message">{t('MessageLabel')}:</label> <textarea id="message" name="message" rows="4" required /> </div> <button type="submit" disabled={isPending}> {isPending ? 'Saadan...' : t('SubmitButton')} </button> {state && <p>{state === 'Thank you for your message!' ? t('SuccessMessage') : t('ErrorMessage')}</p>} </form> ); } export default ContactForm; ``` <h3>6. Juurdepääsetavus (a11y)</h3> <p>Juurdepääsetavus on ülioluline tagamaks, et teie rakendus on kasutatav kõigile, sealhulgas puuetega inimestele. Vormide loomisel arvestage järgmiste juurdepääsetavuse juhistega:</p> <ul> <li><b>Kasutage semantilist HTML-i:</b> Kasutage sobivaid HTML-i elemente, nagu <code><label></code>, <code><input></code> ja <code><textarea></code>, et anda oma vormile struktuur ja tähendus.</li> <li><b>Esitage sildid kõigi vormiväljade jaoks:</b> Siduge sildid vormiväljadega, kasutades elemendi <code><label></code> atribuuti <code>for</code> ja vormivälja atribuuti <code>id</code>.</li> <li><b>Kasutage ARIA atribuute:</b> Kasutage ARIA atribuute, et anda abitehnoloogiatele lisateavet vormi struktuuri ja käitumise kohta.</li> <li><b>Tagage piisav värvikontrast:</b> Kasutage teksti ja taustavärvide vahel piisavat värvikontrasti, et tagada loetavus nägemispuudega inimestele.</li> <li><b>Pakkuge klaviatuurinavigeerimist:</b> Veenduge, et kasutajad saaksid vormis navigeerida ainult klaviatuuri abil.</li> <li><b>Testige abitehnoloogiatega:</b> Testige oma vormi abitehnoloogiatega, nagu ekraanilugejad, et tagada selle juurdepääsetavus puuetega inimestele.</li> </ul> <h2>Globaalsed kaalutlused ja parimad tavad</h2> <h3>1. Ajavööndid</h3> <p>Vormides kuupäevade ja kellaaegadega tegelemisel on oluline arvestada ajavöönditega. Salvestage kuupäevad ja kellaajad serveris UTC-vormingus ning teisendage need kliendis kasutaja kohalikku ajavööndisse.</p> <h3>2. Valuutad</h3> <p>Vormides rahaliste väärtustega tegelemisel on oluline valuutasid õigesti käsitleda. Kasutage väärtuste vormindamiseks vastavalt kasutaja lokaadile valuuta vormindamise teeki ja kuvage vastav valuutasümbol.</p> <h3>3. Aadressid</h3> <p>Aadressivormingud on erinevates riikides oluliselt erinevad. Kasutage teeki, mis toetab rahvusvahelisi aadressivorminguid, et tagada kasutajate õige aadressi sisestamine.</p> <h3>4. Telefoninumbrid</h3> <p>Telefoninumbri vormingud on samuti erinevates riikides erinevad. Kasutage telefoninumbri vormindamise teeki, et vormindada telefoninumbreid vastavalt kasutaja lokaadile ja valideerida, et need on kehtivad telefoninumbrid.</p> <h3>5. Andmete privaatsus ja vastavus</h3> <p>Vormi andmete kogumisel ja töötlemisel pidage silmas andmete privaatsuse eeskirju, nagu GDPR ja CCPA. Hankige kasutajatelt nõusolek enne nende andmete kogumist ja pakkuge neile võimalust oma andmetele juurde pääseda, neid muuta ja kustutada.</p> <h2>Järeldus</h2> <p><code>experimental_useFormState</code> Hook pakub paljutõotava lähenemisviisi vormihalduse lihtsustamiseks Reacti rakendustes. Kasutades ära serveritoiminguid ja omaks võttes deklaratiivset stiili, saavad arendajad luua tõhusamaid, hooldatavamaid ja kasutajasõbralikumaid vorme. Kuigi <code>experimental_useFormState</code> on alles eksperimentaalses etapis, on sellel märkimisväärne potentsiaal vormi töövoogude sujuvamaks muutmiseks ja üldise Reacti arenduskogemuse parandamiseks. Järgides selles juhendis toodud parimaid tavasid, saate tõhusalt kasutada <code>experimental_useFormState</code> võimsust, et luua oma rakenduste jaoks jõulisi ja skaleeritavaid vormilahendusi.</p> <p>Ärge unustage alati olla kursis uusima Reacti dokumentatsiooni ja kogukonna aruteludega, kui API areneb eksperimentaalsest stabiilseks.</p></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">useFormState</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">vormi haldamine</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">vormi olek</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">eksperimentaalne API</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Reacti vormid</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">serveritoimingud</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React Hook</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">vormi optimeerimine</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">asünkroonsed vormid</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">andmete muudatused</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">UI uuendused</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0}; $RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div hidden id="S:3"></div><script>$RC("B:3","S:3")</script><div hidden id="S:0"></div><script>$RC("B:0","S:0")</script></body></html>